<template>
  <div>
    <div class="mvlists" ref="mvlists">
      <ul>
        <li class="" v-for="(item,index) in mvlists" :key="index">
          <div
            class="imgs"
            :style="{'background-image':'url('+item.cover+')'}" 
            v-show="playNum != index" 
            @click="getMvUrlFun(index,item.id)"
          >
            <span class="iconfont icon-bofang1"></span>
          </div>
          <div class="imgs" v-if="playNum == index" @click="mvplayend($event)">
              <video id="video1" @canplaythrough="canplayfun"  :ref="'video'+index" :src="item.mvurl" preload="metadata"></video>
          </div>
          <p>
            {{item.name}}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {getMvlist,getMvUrl} from "../api/mv";
export default {
    data() {
        return {
            mvlists:[],
            offset:0,//页码
            flag:true,
            playNum:null
        }
    },
    methods: {
        getMvlistFun(){
            getMvlist({limit:5,offset:this.offset}).then(data=>{
                this.mvlists = data.data;
                console.log(this.mvlists );
            })
        },
        add(){
            // 防抖：阻止用户多次请求服务器
            if(this.flag){
                this.flag = false;
                this.offset += 5;
                getMvlist({limit:5,offset:this.offset}).then(data=>{
                    this.mvlists = this.mvlists.concat(data.data);
                    this.flag = true;
                })
            }
        },
        handleScroll(){
            // console.log("111");
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; //滚动条偏移量
            let lis = this.$refs.mvlists.getElementsByTagName("li");
            let num = lis.length;
            let liHeight = lis[num-3].offsetTop;
            if(scrollTop > liHeight){ //触发加载数据
                this.add();
            }
        },
        getMvUrlFun(index,id){
            this.playNum = index
            getMvUrl({id}).then(data=>{
                this.$set(this.mvlists[index],"mvurl",data.data.url);
            })
        },
        mvplayend(){
            this.$refs['video'+this.playNum][0].pause();
            this.playNum = null;
        },
        canplayfun(event){
            console.log("播放吧");
            event.target.play();
        }
    },
    created() {
        this.getMvlistFun()
    },
    mounted() {
        this.$nextTick(()=>{
            window.addEventListener("scroll",this.handleScroll)
        })
    },
};  
</script>

<style lang="less" scoped>
.mvlists{
        width: 100%;
        li{
            margin-bottom:10px ;
            .imgs{
                width: 100%;
                height: 300px;
                // background-color: yellow;
                background-repeat: no-repeat;
                background-size: cover;
                position: relative;
                span{
                    position: absolute;
                    top:0px;
                    left:0px;
                    right:0px;
                    bottom:0px;
                    margin:auto;
                    width: 80px;
                    height: 80px;
                    text-align: center;
                    line-height: 80px;
                    color:#fff;
                    font-size: 32px;
                    background: rgba(0, 0, 0,0.5);
                    border-radius: 50%;
                }
                video{
                    height: 300px;
                    margin: 0 auto;
                    display: block;
                }
            }
            p{
                font-size: 24px;
                text-indent: 1em;
                height: 40px;
                line-height: 40px;
                overflow: hidden;
            }
        }
    }
</style>